<script lang="ts" setup>
import type { TabItem } from "#ui/types";

interface UTabSlot { item: TabItem, index: number, selected: boolean }
const Level = {
  all: -1,
  beginner: 0,
  junior: 1,
  middle: 2,
  senior: 3,
} as const
const route = useRoute();
const lang = computed(() => (route.params as { lang: Langs }).lang);

const selectLevel = ref<SelectLevelType>(Level.all);
const levelTab = shallowRef<TabItem[]>([
  {
    label: "全部",
    icon: "i-ic:round-all-out",
  },
  {
    label: "入门",
    icon: "i-carbon:skill-level",
  },
  {
    label: "初级",
    icon: "i-carbon:skill-level-basic",
  },
  {
    label: "中级",
    icon: "i-carbon:skill-level-intermediate",
  },
  {
    label: "高级",
    icon: "i-carbon:skill-level-advanced",
  },
]);
const allCourseInfo = ref<CourseInfoType[]>([]);
// const courseInfoViewModel = ref<CourseInfoType[]>([]);

onMounted(async () => {
  const res = await $fetch(`/api/course/${lang.value}`, {
    method: "GET",
  });
  allCourseInfo.value = res.data;
  // courseInfoViewModel.value = courseInfo.value;
});

const beginnerCourseInfo = computed(() => allCourseInfo.value.filter(item => item.level === Level.beginner))
const juniorCourseInfo = computed(() => allCourseInfo.value.filter(item => item.level === Level.junior))
const middleCourseInfo = computed(() => allCourseInfo.value.filter(item => item.level === Level.middle))
const seniorCourseInfo = computed(() => allCourseInfo.value.filter(item => item.level === Level.senior))

const courseInfoMapping = computed(() => ([
  allCourseInfo.value,
  beginnerCourseInfo.value,
  juniorCourseInfo.value,
  middleCourseInfo.value,
  seniorCourseInfo.value,
]));
// const
// watch(selectLevel, () => {
//   console.log("selectLevel change");

//   if (selectLevel.value === -1) {
//     courseInfoViewModel.value = courseInfo.value;
//   }
//   else {
//     courseInfoViewModel.value = courseInfo.value.filter(
//       item => item.level === selectLevel.value,
//     );
//   }
// });
definePageMeta({
  middleware: ["auth"],
});
const langTypeMapping: Ref<Record<string, string>> = ref({
  python: "vscode-icons:file-type-python",
  vue: "i-vscode-icons:file-type-vue",
  java: "i-vscode-icons:file-type-class",
  typescript: "i-vscode-icons:file-type-typescript-official",
});
</script>

<template>
  <ClientOnly>
    <div class="text-4xl my-5 pl-2">
      <UIcon :name="langTypeMapping[lang]" class="w-10 h-10 flex-shrink-0" />
      &nbsp;<span class="capitalize">{{ $route.params.lang }}</span>&nbsp;专题
    </div>
    <UTabs :items="levelTab">
      <template #default="{ item, selected }:UTabSlot">
        <div
          class="flex items-center gap-2 relative truncate"
        >
          <UIcon :name="item.icon" class="w-4 h-4 flex-shrink-0" dynamic />
          <span class="truncate">{{ item.label }}</span>
          <span v-if="selected" class="absolute -right-4 w-2 h-2 rounded-full bg-primary-500 dark:bg-primary-400" />
        </div>
      </template>

      <template #item="{ index: tab_index }:UTabSlot">
        <!-- item,index {{ item }} {{ tab_index }} -->
        <div class="flex flex-row basis-3/5 flex-shrink flex-wrap *:m-2">
          <div v-if="allCourseInfo.length === 0">
            暂无
          </div>
          <template v-else>
            <!-- 安全检查 -->
            <Gcard
              v-for="(courseInfoItem, courseInfoIndex) of courseInfoMapping[tab_index]"
              :key="courseInfoIndex"
              :level="courseInfoItem.level"
              :title="courseInfoItem.title"
              :content="courseInfoItem.content"
              :img="courseInfoItem.img"
              :href="courseInfoItem.href"
              :price="courseInfoItem.price"
            />
          </template>
        </div>
      </template>
    </UTabs>
    <template #fallback>
      <FallBack />
    </template>
  </ClientOnly>
</template>

<style></style>
